<template>
    <div id="integral">
        <vue-better-scroll ref="scroll" slot="list" class="list" :scrollbar="scrollbarObj" :pullUpLoad="pullUpLoadObj" :startY="0" @pullingUp="onPullingUp">
            <page-title title="我的积分"></page-title>
            <div class="uname">{{integral.name}}</div>
            <div class="total">总积分：
                <b>{{integral.totalIntegral}}</b>
            </div>
            <div class="spoor">
                <div class="box" v-for="(item,index) in integral.list" :key="index">
                    <div class="spoor-date l">
                        <p class="date">{{item.create_time.replace(/-/g,'/') | formatTime('y/m/d')}} </p>
                        <p class="date">{{item.create_time.replace(/-/g,'/') | formatTime('h:i')}} </p>
                    </div>
                    <div class="spoor-header l">
                        <div class="num"></div>
                    </div>
                    <div class="spoor-main l" ref="main">
                        <div class="spoor-line"></div>
                        <div class="spoor-main-content">
                            <h4 class="title" v-html="item.title"></h4>
                            <p class="description">
                                <span v-if="item.reason" v-html="item.reason"></span>
                                <span v-else v-html="item.desc"></span>
                                <span v-if="item.score" class="integral">+{{item.score}}</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </vue-better-scroll>
    </div>
</template>

<script>
import BScroll from 'better-scroll'
import VueBetterScroll from '@/components/Loadpullup'
//用户--积分
import { findUserIntegral } from "@/api/user";
export default {
    data() {
        return {
            // 这个配置可以开启滚动条，默认为 false。当设置为 true 或者是一个 Object 的时候，都会开启滚动条，默认是会 fade 的
            scrollbarObj: {
                fade: true
            },
            // 这个配置用于做上拉加载功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载，可以配置离底部距离阈值（threshold）来决定开始加载的时机
            pullUpLoadObj: {
                threshold: 0,
                txt: {
                    more: '<img class="scroll-loading" src="">',
                    noMore: '没有更多数据了'
                }
            },
            renderOffset: 0,
            originList: [],
            integral: {
                name: '',
                totalIntegral: 0,
                list: []
            },
        }
    },
    components: {
        VueBetterScroll
    },
    mounted() {
        this.$vux.loading.show('')
        findUserIntegral().then(res => {
            this.integral.name = res.user.name
            this.integral.totalIntegral = res.user.integral
            this.originList = res.list
            if (this.originList.length > 100) {
                this.integral.list = this.originList.slice(this.renderOffset, this.renderOffset + 100)
                this.$refs.scroll.forceUpdate(true)
            } else {
                this.integral.list = this.originList
                this.$refs.scroll.forceUpdate(false)
            }
            this.$vux.loading.hide()
        }).catch(_ => {
            this.$vux.loading.hide()
        })
    },
    methods: {
        onPullingUp() {
            // 模拟上拉 加载更多数据
            this.renderOffset = this.renderOffset + 100
            let buffers = this.originList.slice(this.renderOffset, this.renderOffset + 100)
            this.integral.list = this.integral.list.concat(buffers)
            if (this.originList.length > this.renderOffset) {
                this.$refs.scroll.forceUpdate(true)
            } else {
                this.$refs.scroll.forceUpdate(false)
            }
        },
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
#integral {
  position: relative;
  height: calc(100vh - 2rem);
  .list {
    height: 100%;
    overflow: hidden;
    position: relative;
  }
  .uname {
    font-size: 0.875rem;
    padding: 0.8rem 0.6rem 0.5rem;
    font-weight: 600;
  }
  .total {
    background: #f2f4f6;
    line-height: 2.2em;
    padding: 0 0.6rem;
    b {
      color: orange;
      font-weight: 600;
    }
  }
}

.spoor {
  width: 100%;
  padding-top: 20px;

  .l {
    float: left;
  }
  .title {
    //   line-height: 2em;
    font-size: 0.66rem;
  }

  .box {
    position: relative;
    vertical-align: top;
    //   overflow: auto;
    height: auto;
    font-size: 0;
    padding: 0 0.2rem;
    &:last-child {
      .spoor-line {
        display: none;
      }
    }
  }

  .spoor-date {
    position: relative;
    top: -0.08rem;
    display: block;
    text-align: right;
    padding-right: 0.4rem;
    width: 4rem;
    line-height: 1.8em;
    font-size: 0.6rem;
  }

  .spoor-header {
    position: relative;
    top: 0.18rem;
    width: 12px;
    height: 12px;
    border-top-left-radius: 999px; /* 左上角 */
    border-top-right-radius: 999px; /* 右上角 */
    border-bottom-right-radius: 999px; /* 右下角 */
    border-bottom-left-radius: 999px; /* 左下角 */
    border-radius: 999px;
    line-height: 12px;
    color: #fff;
    background-color: #74c5f0;
    border-color: #74c5f0;
    .num {
      display: block;
      background-color: #2c96d0;
      border: 2px solid #fff;
      border-top-left-radius: 999px; /* 左上角 */
      border-top-right-radius: 999px; /* 右上角 */
      border-bottom-right-radius: 999px; /* 右下角 */
      border-bottom-left-radius: 999px; /* 左下角 */
      border-radius: 999px;
      width: 10px;
      height: 10px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .spoor-line {
    position: absolute;
    border-color: inherit;
    background-color: #74c5f0;
    width: 1px;
    box-sizing: border-box;
    top: 0.7rem;
    bottom: 0;
    left: -0.26rem;
    height: 100%;
  }

  .spoor-main {
    position: relative;
    top: -0.05rem;
    display: block;
    width: calc(100% - 4.6rem);
    font-size: 0.6rem;
    padding: 0 0 1rem 0.5rem;
    line-height: 1.6em;
  }

  .spoor-main-content .description {
    margin-top: 0.2rem;
    color: #a0a0a0;
  }
  .integral {
    margin-left: 0.5rem;
    color: orange;
  }
}
</style>
